<template>
	<div>
		<el-submenu :index="menu.id" v-if="menu.children.length > 0">
			<template slot="title">
				<i :class="menu.icon"></i>
				<span slot="title" :title="menu.name">{{ menu.name }}</span>
			</template>
			<menu-item :menu="item" v-for="(item, i) in menu.children" @click="click"></menu-item>
		</el-submenu>
		<el-menu-item :index="menu.id" v-else @click="click" :name="menu.name" :url="menu.url">
			<template slot="title">
				<i :class="menu.icon"></i>
				<span slot="title" :title="menu.name">{{ menu.name }}</span>
			</template>
		</el-menu-item>
	</div>
</template>

<script>
export default {
	name: 'menuItem',
	components: {},
	data() {
		return {};
	},
	props: {
		menu: {
			type: Object,
			default() {
				return {};
			}
		},
		isOpen: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	methods: {
		click(e) {
			this.$emit('click', e);
		}
	},
	mounted() {}
};
</script>

<style scoped>
span {
	display: inline-block;
	width: 110px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
	height: 0;
	width: 0;
	overflow: hidden;
	visibility: hidden;
	display: inline-block;
}
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
	display: none;
}
</style>
